<template>
  <el-form
    ref="pollutionForm"
    :model="formData"
    :rules="rules"
    label-width="100px"
    class="pollution-form"
  >
    <!-- 是否为演练 -->
    <el-form-item label="是否为演练">
      <el-radio-group v-model="formData.isDrill">
        <el-radio label="是">是</el-radio>
        <el-radio label="否">否</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 事件标题、事发时间 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="*事件标题" prop="eventTitle">
          <el-input
            v-model="formData.eventTitle"
            placeholder="请输入事件标题"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="*事发时间" prop="eventTime">
          <el-date-picker
            v-model="formData.eventTime"
            type="datetime"
            placeholder="选择事发时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 报警人、报警人电话 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="报警人" prop="reporter">
          <el-input v-model="formData.reporter" placeholder="请输入报警人" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="报警人电话" prop="reporterPhone">
          <el-input
            v-model="formData.reporterPhone"
            placeholder="请输入报警人电话"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 接警人、接警人电话 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="*接警人" prop="policeReceiver">
          <el-input
            v-model="formData.policeReceiver"
            placeholder="请输入接警人"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="*接警人电话" prop="policeReceiverPhone">
          <el-input
            v-model="formData.policeReceiverPhone"
            placeholder="请输入接警人电话"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 接警时间、事发区域 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="*接警时间" prop="policeTime">
          <el-date-picker
            v-model="formData.policeTime"
            type="datetime"
            placeholder="选择接警时间"
            style="width: 100%"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="*事发区域" prop="eventRegion">
          <el-select
            v-model="formData.eventRegion"
            placeholder="请选择行政区划"
          >
            <el-option label="区域1" value="region1" />
            <el-option label="区域2" value="region2" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 事发地点 -->
    <el-form-item label="*事发地点" prop="eventLocation">
      <el-input v-model="formData.eventLocation" placeholder="请输入事发地点" />
    </el-form-item>

    <!-- 经度、纬度 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="*经度" prop="longitude">
          <el-input v-model="formData.longitude" placeholder="请输入经度" />
        </el-form-item>
      </el-col>
      <el-col :span="10">
        <el-form-item label="*纬度" prop="latitude">
          <el-input v-model="formData.latitude" placeholder="请输入纬度" />
        </el-form-item>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" size="small">地图选点</el-button>
      </el-col>
    </el-row>

    <!-- 事件来源 -->
    <el-form-item label="事件来源">
      <el-radio-group v-model="formData.eventSource">
        <el-radio label="新闻舆情">新闻舆情</el-radio>
        <el-radio label="领导指示">领导指示</el-radio>
        <el-radio label="上级调度">上级调度</el-radio>
        <el-radio label="地方报告">地方报告</el-radio>
        <el-radio label="群众举报">群众举报</el-radio>
        <el-radio label="其它">其它</el-radio>
      </el-radio-group>
    </el-form-item>

    <!-- 事发原因 -->
    <el-form-item label="事发原因" prop="eventReason">
      <el-select v-model="formData.eventReason" placeholder="请选择事发原因">
        <el-option label="原因1" value="reason1" />
        <el-option label="原因2" value="reason2" />
      </el-select>
    </el-form-item>

    <!-- 污染类型 -->
    <el-form-item label="*污染类型" prop="pollutionType">
      <el-checkbox-group v-model="formData.pollutionType">
        <el-checkbox label="水污染">水污染</el-checkbox>
        <el-checkbox label="大气污染">大气污染</el-checkbox>
        <el-checkbox label="土壤污染">土壤污染</el-checkbox>
        <el-checkbox label="未定型污染">未定型污染</el-checkbox>
        <el-checkbox label="其它">其它</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <!-- 污染河流 -->
    <el-form-item label="污染河流" prop="pollutedRiver">
      <el-select v-model="formData.pollutedRiver" placeholder="请选择污染河流">
        <el-option label="河流1" value="river1" />
        <el-option label="河流2" value="river2" />
      </el-select>
    </el-form-item>

    <!-- 污染物、泄漏量 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="污染物" prop="pollutant">
          <el-select v-model="formData.pollutant" placeholder="请选择污染物">
            <el-option label="污染物1" value="pollutant1" />
            <el-option label="污染物2" value="pollutant2" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="泄漏量" prop="leakageAmount">
          <el-input
            v-model="formData.leakageAmount"
            placeholder="请输入泄漏量"
            suffix="kg"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 事件属性 -->
    <el-form-item label="事件属性" prop="eventProperty">
      <el-checkbox-group v-model="formData.eventProperty">
        <el-checkbox label="饮用水安全">饮用水安全</el-checkbox>
        <el-checkbox label="重金属或类金属">重金属或类金属</el-checkbox>
        <el-checkbox label="尾矿库">尾矿库</el-checkbox>
        <el-checkbox label="跨国界">跨国界</el-checkbox>
        <el-checkbox label="跨省(区、市)">跨省(区、市)</el-checkbox>
        <el-checkbox label="跨地市">跨地市</el-checkbox>
        <el-checkbox label="群体性事件">群体性事件</el-checkbox>
      </el-checkbox-group>
    </el-form-item>

    <!-- 涉事企业 -->
    <el-form-item label="涉事企业" prop="involvedEnterprise">
      <el-select
        v-model="formData.involvedEnterprise"
        placeholder="请选择涉事企业"
      >
        <el-option label="企业1" value="enterprise1" />
        <el-option label="企业2" value="enterprise2" />
      </el-select>
    </el-form-item>

    <!-- 事件描述 -->
    <el-form-item label="*事件描述" prop="eventDescription">
      <el-input
        v-model="formData.eventDescription"
        type="textarea"
        placeholder="请输入事件描述"
        rows="4"
      />
    </el-form-item>
    <!-- 底部按钮 -->
    <div class="form-buttons">
      <el-button type="primary" @click="handleSubmit">确定</el-button>
      <el-button @click="handleCancel">取消</el-button>
    </div>
  </el-form>
</template>

<script>
export default {
  name: "PollutionEventForm",
  data() {
    return {
      formData: {
        isDrill: "否",
        eventTitle: "",
        eventTime: "",
        reporter: "",
        reporterPhone: "",
        policeReceiver: "",
        policeReceiverPhone: "",
        policeTime: "",
        eventRegion: "",
        eventLocation: "",
        longitude: "",
        latitude: "",
        eventSource: "",
        eventReason: "",
        pollutionType: [],
        pollutedRiver: "",
        pollutant: "",
        leakageAmount: "",
        eventProperty: [],
        involvedEnterprise: "",
        eventDescription: "",
      },
      rules: {
        eventTitle: [
          { required: true, message: "请输入事件标题", trigger: "blur" },
        ],
        eventTime: [
          { required: true, message: "请选择事发时间", trigger: "change" },
        ],
        policeReceiver: [
          { required: true, message: "请输入接警人", trigger: "blur" },
        ],
        policeReceiverPhone: [
          { required: true, message: "请输入接警人电话", trigger: "blur" },
        ],
        policeTime: [
          { required: true, message: "请选择接警时间", trigger: "change" },
        ],
        eventRegion: [
          { required: true, message: "请选择事发区域", trigger: "change" },
        ],
        eventLocation: [
          { required: true, message: "请输入事发地点", trigger: "blur" },
        ],
        longitude: [{ required: true, message: "请输入经度", trigger: "blur" }],
        latitude: [{ required: true, message: "请输入纬度", trigger: "blur" }],
        pollutionType: [
          { required: true, message: "请选择污染类型", trigger: "change" },
        ],
        eventDescription: [
          { required: true, message: "请输入事件描述", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.pollutionForm.validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交逻辑
          console.log("表单数据：", this.formData);
          // 可在此处调用接口提交数据
        }
      });
    },
    handleCancel() {
      // 取消逻辑，可重置表单或关闭弹窗等
      this.$refs.pollutionForm.resetFields();
      this.$emit("cancel");
    },
  },
};
</script>

<style scoped>
.pollution-form {
  width: 800px; /* 可根据需求调整表单宽度 */
  margin: 0 auto;
}
.form-buttons {
  text-align: right;
  margin-top: 20px;
}
</style>
